<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h2>人员列表</h2>
        <ul>
            <!--
                v-for:
                    (item index) in xxxList
                    key 唯一标识
                    v-for in / of
                    可以遍历 数组/对象/字符串/数字
                        item分别为元素/属性/字符/每一个数值（从0开始）
                    遍历指定次数
                    v-for of 


                    key 写了：建议使用唯一标识ID，如果使用index索引值并且进行打乱顺序的操作会影响diff算法
                                既影响效率 又影响排列顺序（有用户输入的元素节点）
                        没写：VUE默认使用index作为key
                        作用：给节点做一个标识 key是vue内部使用的 当形成真实dom就没有key属性了
                    虚拟Dom的diff对比算法：
                        正常流程：初始数据 -> 虚拟DOM -> 转为真实DOM
                        新增DOM后：初始数据 -> 新虚拟DOM -> 对比旧虚拟DOM -> 转为真实DOM
                        对比新旧DOM：根据key 对比新旧虚拟DOM的节点，对比后看是否一样
                            如果一样：拿旧虚拟DOM节点来复用
                            不一样：用新虚拟DOM的值生成

             -->
            <li v-for="person in persons">{{person.name}} - {{person.age}} <input type="text"></li>
            <button @click.once="insertPerson()">点我插入数据</button>
        </ul>
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    persons : [{
                        id : '001',
                        name : '张三',
                        age : 22
                    },{
                        id : '002',
                        name : '李四',
                        age : 23
                    },{
                        id : '003',
                        name : '王五',
                        age : 21
                    }]
                }
            },
            methods: {
                insertPerson(){
                    const person = {
                        id : '004',
                        name : 'geekrose',
                        age : 55
                    }
                    this.persons.unshift(person);
                }
            },
        })        


    </script>

</body>
</html>